<template>
  <q-list>
    <q-item-label header> Essential Links </q-item-label>
    <q-item class="custom-list-height" clickable tag="a" target="_blank">
      <q-select
        outlined
        class="custom-select-height"
        v-model="model"
        label="串口"
        :options="options"
        :dense="dense"
        :options-dense="denseOpts"
        style="width: 200px; height: 38px"
      >
        <template v-slot:prepend>
          <q-icon name="chat" />
        </template>
      </q-select>
    </q-item>
    <q-item clickable tag="a" target="_blank">
      <q-item-section avatar>
        <q-icon name="chat" />
      </q-item-section>
      <q-item-section>
        <q-item-label>串口</q-item-label>
      </q-item-section>
    </q-item>
    <q-item clickable tag="a" target="_blank">
      <q-item-section avatar>
        <q-icon name="record_voice_over" />
      </q-item-section>
      <q-item-section>
        <q-item-label>串口</q-item-label>
      </q-item-section>
    </q-item>
  </q-list>
</template>

<script>
import { ref } from "vue";
export default {
  setup() {
    return {
      model: ref(null),
      options: ["Google", "Facebook", "Twitter", "Apple", "Oracle"],
      dense: ref(false),
      denseOpts: ref(false),
    };
  },
};

// const props = defineProps({
//   title: {
//     type: String,
//     required: true,
//   },
// });
</script>

<style scoped>
.custom-list-height,
.custom-select-height {
  /* height: 50px;
  min-height: 50px; */
}
</style>
